<!-- 商品列表 -->
<template>
  <ContainerSlot>
    <template slot="searchModule">
      <SearchForm :labelWidth="labelWidth" :formConfig="formConfig" :formData="formData" :slotList="slotList"
        ref="ruleForm">
        <template slot="searchBtn">
          <el-button type="primary" @click.prevent="() => { page = 1, queryPageList() }">查询</el-button>
        </template>
        <template slot="resetBtn">
          <el-button @click.prevent="() => { page = 1, resetForm() }">重置</el-button>
        </template>
      </SearchForm>
    </template>
    <template slot="operationModule">
      <el-button class="optBtn" type="primary" plain @click="addData()">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加</span>
      </el-button>
    </template>
    <template slot="contentModule">
      <div class="goodsList" v-loading="loading">
        <div class="goods" v-for="goods, index in  tableData " :key='index'>
          <div class="title" @click="unfold(index)">
            <span>展开</span>
            <i v-if="unfoldList.indexOf(index) != -1" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-right"></i>
          </div>
          <div class="goodsDetail"
            :style="unfoldList.indexOf(index) != -1 ? 'height:360px;transition: all 0.5s;' : 'transition: all 0.7s;height:0;overflow:hidden;opacity: 0;'">
            <div class="line" />
            <div class="goodsImg flex">
              <el-image :src="imgObj.imgUrl" v-for="imgObj, index in goods.imgList" :key="index">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="info flex">
              <span>商品名称：<el-tooltip :content="goods.productName" placement="top"><span class="gary">{{ goods.productName
              }}</span></el-tooltip></span>
              <span>商品品牌：<el-tooltip :content="goods.brand" placement="top"><span class="gary">{{ goods.brand
              }}</span></el-tooltip></span>
              <span>商品价格：<span class="gary">{{ goods.price }}元</span></span>
              <span>商品规格：<span class="gary">{{ `${goods.baseValue} ${goods.baseUnit.unitName}/${goods.auxUnit.unitName}`
              }}</span></span>
              <span>商品型号：<el-tooltip :content="goods.model" placement="top"><span class="gary">{{ goods.model
              }}</span></el-tooltip></span>
            </div>
            <div class="info flex">
              <div class="flex" style="width: 100%;">
                <div class="goodsInfos">商品介绍：</div><span class="garys">{{
                  goods.productDescription
                }}</span>
              </div>
            </div>
            <div class="info flex">
              <span v-if="goods.deliveryMethod === '0'">配送方式：<span class="gary">线下自提</span></span>
              <span v-if="goods.deliveryMethod === '1'">配送方式：<span class="gary">商家配送</span></span>
            </div>
            <div class="info address">
              <span>自提地点：</span>
              <template v-for="item, index in goods.pickupPointList">
                <div v-if="item" style="padding:5px 0" :key="index">
                  <span class="garys">{{ index + 1 }}.自提点名称：{{ item.pickupPointName ?
                    item.pickupPointName : '' }} --
                    自提点地址：{{
                      item.totalAddress ? item.totalAddress : '' }}</span>
                </div>
              </template>
            </div>
          </div>
          <div class="goodsInfo flex">
            <div class="info flex">
              <span>商品名称：<el-tooltip :content="goods.productName" placement="top"><span class="gary">{{ goods.productName
              }}</span></el-tooltip></span>
              <span>商品品牌：<el-tooltip :content="goods.brand" placement="top"><span class="gary">{{ goods.brand
              }}</span></el-tooltip></span>
              <span>商品价格：<span class="gary">{{ goods.price }}元</span></span>
              <span>商品规格：<span class="gary">{{ `${goods.baseValue} ${goods.baseUnit.unitName}/${goods.auxUnit.unitName}`
              }}</span></span>

              <span>商品型号：<el-tooltip :content="goods.model" placement="top"><span class="gary">{{ goods.model
              }}</span></el-tooltip></span>
            </div>
            <div class="state flex">
              <span
                :style="'padding: 0 20px; font-size: 12px;' + (goods.status == '0' ? 'color:#999999' : 'color:#409EFF')">{{
                  goods.status == '1' ? '已上架' : '已下架' }}</span>
              <el-button size="mini" v-if="goods.status == '1'" type="primary" plain
                @click="soldOut(goods, '0')">下架商品</el-button>
              <el-button size="mini" v-if="goods.status == '0'" type="primary" plain
                @click="soldOut(goods, '1')">上架商品</el-button>
              <el-button size="mini" type="primary" plain @click="changePrice(goods, goods.price)">调整价格</el-button>
              <el-button size="mini" type="primary" plain @click="editData(goods)">编辑商品</el-button>
              <el-button size="mini" type="primary" @click="delData(goods.productId)">删除商品</el-button>
            </div>
          </div>
        </div>
        <div v-if="tableData.length <= 0">暂无商品！</div>
      </div>
      <el-dialog :close-on-click-modal='false' title="调价" :visible.sync="dialogFormVisible" width="30%">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-form-item label="商品价格：">
            <el-input v-model="form.price" type="number" min="0" @change="form.price <= 0 ? form.price = 0 : ''"
              placeholder="请输入商品价格">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <template slot="footerModule">
      <el-pagination @current-change="handleCurrentChange" :current-page="page" background
        layout=" prev, pager, next, jumper" :total="total">
      </el-pagination>
    </template>
    <template slot="dialog">
      <AddEdit :showDialog="showDialog" :formData="editFormData" :api="api" @closeDialog="closeDialog" />
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import AddEdit from './components/addEdit.vue'
import { formConfig } from './pageConfig'

import AgriculturalSortManagement from '@/api/module/agricultural-sort-management'
export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table, AddEdit },
  computed: {
    formConfig () {
      return formConfig
    },
    productListData () {
      return productListData
    }
  },
  data () {
    return {
      loading: false,
      api: AgriculturalSortManagement.add,
      dialogFormVisible: false,
      showDialog: false,
      page: 1,
      total: 10,
      tableData: [],
      slotList: [
        { slotName: 'searchBtn' },
        { slotName: 'resetBtn' }
      ],
      // 表单域标签的宽度
      labelWidth: '150px',
      formData: {},
      form: {
        price: ''
      },
      rules: {
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
      },
      selectedGoodsData: {},
      editFormData: {},
      unfoldList: []
    }
  },
  mounted () {
    this.queryPageList()
  },
  methods: {
    //商品上架下架
    soldOut (data, status) {
      data.status = status //上架下架状态
      data.productTypeId = data.productType.productTypeId
      this.changeGoodsStatus(data)
    },
    //商品改价
    changePrice (data, price) {
      data.productTypeId = data.productType.productTypeId
      this.form.price = price
      this.dialogFormVisible = true
      this.selectedGoodsData = data
    },
    //确认价格
    confirm () {
      let price = JSON.parse(JSON.stringify(this.selectedGoodsData.price))
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.selectedGoodsData.price = this.form.price
          await this.changeGoodsStatus(this.selectedGoodsData)
          this.dialogFormVisible = false
        } else {
          this.selectedGoodsData.price = price
          return false;
        }
      });
    },
    //修改商品状态
    changeGoodsStatus (data) {
      AgriculturalSortManagement.edit(data).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        } else {
          this.$message({
            type: 'info',
            message: res.msg || '操作失败!'
          });
        }
      })
    },
    unfold (i) {
      if (this.unfoldList.indexOf(i) != -1) {
        this.unfoldList.splice(this.unfoldList.indexOf(i), 1)
      } else {
        this.unfoldList.push(i)
      }
    },
    //添加数据
    addData () {
      this.showDialog = true
      this.editFormData = {
        fileList: []
      }
      this.api = AgriculturalSortManagement.add  //添加接口
    },
    //编辑数据
    editData (data) {
      this.showDialog = true
      this.editFormData = JSON.parse(JSON.stringify(data))
      this.api = AgriculturalSortManagement.edit //编辑接口
    },
    //关闭（添加编辑）弹窗
    closeDialog (isRef) {
      this.showDialog = false
      isRef && this.queryPageList()
    },
    //删除数据
    delData (id) {
      this.$confirm('您确定删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgriculturalSortManagement.del(id).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    lastPage (page, list) {
      if (page > 1 && list.length == 0) {
        this.page--
        this.queryPageList()
      }
    },

    //列表查询
    queryPageList () {
      this.loading = true
      for (let key in this.formData) {
        if (!this.formData[key]) {
          delete this.formData[key]
        }
      }
      let params = {
        page: this.page,
        size: 10,
        condition: { ...this.formData }
      }
      AgriculturalSortManagement.queryPageByCondition(params).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.lastPage(this.page, res.data.content)
          this.tableData = res.data.content
          console.log(res.data.content)
          this.total = Number(res.data.totalElements)
        } else {
          this.tableData = []
        }
        if (this.tableData.length == 0) {
          this.$message({
            type: 'success',
            message: '暂无数据!'
          });
        }
      })
    },
    //修改用户状态
    editStatus (data) {
      this.$confirm('您确定要修改该账号的启用状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgriculturalSortManagement.updateStatus({
          'id': data.userId,
          'status': data.status
        }).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          } else {
            data.status = data.status == '1' ? '0' : '1'
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    handleCurrentChange (e) {
      this.page = e
      this.queryPageList()
    },
    resetForm () {
      console.log('重置')
      this.$refs.ruleForm.resetForm();
      this.queryPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}

.goodsList::-webkit-scrollbar {
  width: 0;
}

.goodsList {
  height: 100%;
  overflow: auto;

  .goods {
    margin-bottom: 10px;
    background-image: url(../../../../assets/backgroundImg/goodsBg.png);
    background-color: #edf6ff;
    background-size: 100% 210px;
    background-repeat: no-repeat;
    box-shadow: 0px -10px 16px -5px #cecece;

    .title {
      text-align: right;
      padding: 0 15px;
      line-height: 30px;
      cursor: pointer;
    }

    .goodsDetail {
      .line {
        width: 20px;
        height: 4px;
        border-radius: 2px;
        background: #00a4df;
        margin: 0 auto;
        transform: translate(0, 2px);
      }

      .goodsImg {
        width: 100%;
        height: 180px;
        background: #8989891f;
        padding-top: 20px;
        overflow: auto;

        ::v-deep .el-image {
          width: 200px;
          height: 120px;
          line-height: 120px;
          text-align: center;
          background: rgba(34, 34, 34, 0.411);
          margin-left: 20px;
          flex-shrink: 0;
        }
      }

      .info {
        justify-content: flex-start;
        padding: 5px 10px;

        span {
          border-left: 1px solid #00bbfe;
          padding: 0 30px 0px 10px;
          font-weight: bold;
          font-size: 14px;
          display: flex;
        }

        .gary {
          // color: #00bbfe;
          font-weight: 400;
          border: none;
          max-width: 300px;
          display: block;
          font-weight: 400;
          border: none;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;

        }

        .garys {
          font-weight: 400;
          border: none;
          display: block;
          width: calc(100% - 80px);
        }
      }

      .address {
        height: 100px;
        overflow-y: auto;
      }
    }

    .goodsInfo {
      justify-content: space-between;
      padding: 10px;
      background-color: #edf6ff;
      flex-wrap: row wrap;

      .info {
        justify-content: flex-start;
        width: calc(100% - 500px);
        flex-flow: wrap;

        span {
          border-left: 1px solid #00bbfe;
          padding: 0 30px 0px 10px;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 10px;
          display: flex;
        }

        .gary {
          // color: #00bbfe;
          font-weight: 400;
          border: none;
          max-width: 200px;
          display: block;
          font-weight: 400;
          border: none;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
      }

      .state {
        justify-content: flex-end;
        width: 500px;
      }
    }
  }

  .goods:hover {
    box-shadow: 0px -10px 16px -5px #b1b0b0;
  }

  .goodsInfos {
    border-left: 1px solid #00bbfe;
    padding-left: 10px;
    font-weight: bold;
    font-size: 14px;
    width: 90px;
  }
}
</style>

